* {
    box-sizing: border-box margin: 0;
    padding: 0;
  }
  body {
    background: white;
  }
  .rainbow {
    height: 200px;
    overflow: hidden;
  }
  .rainbow div {
    overflow: hidden;
  }
  .rainbow > div {
    width: 400px;
    height: 400px;
    background: red;
    border-radius: 50%
  }
  .rainbow > div> div {
    background: hsl(60, 80%, 50%);
    height: 380px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div >div {
    background: hsl(120, 80%, 50%);
    height: 360px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div > div> div {
    background: hsl(180, 80%, 50%);
    height: 340px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div> div> div> div {
    background: hsl(240, 80%, 50%);
    height: 320px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div> div> div> div >div {
    background: hsl(300, 80%, 50%);
    height: 300px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div> div> div> div >div>div {
    background: hsl(360, 80%, 50%);
    height: 280px;
    margin: 10px;
    border-radius: 50%
  }
  .rainbow > div> div> div> div> div >div>div>div {
    background: hsl(360, 80%, 100%);
    height: 260px;
    margin: 10px;
    border-radius: 50%
  }